<template>
  <div class="content">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="30"
      shapeType="circle"
      :particleSize="1"
      linesColor="#f2f2f2"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    ></vue-particles>
    <div class="container">
      <div class="form-box1">
        <el-form class="form" :model="form" ref="form" :rules="rules" label-position="left">
              <el-form-item prop="input3" label>
                <el-input v-model="form.input3" :placeholder="$t('message.pho')"></el-input>
              </el-form-item>

              <el-form-item prop="Verification3" label>
                <div style="margin-top: 15px;">
                  <el-input
                    :placeholder="$t('message.getthe')"
                     maxlength="6" v-model.number="form.Verification3"
                    class="input-with-select"
                  >
                    <el-button v-show="show" @click="getCode" slot="append" type="primary">{{$t('message.Getcode')}}</el-button>
                    <el-button v-show="!show" slot="append" type="primary">{{count}} s{{$t('message.Try')}}</el-button>
                  </el-input>
                </div>
              </el-form-item>

              <el-form-item prop="password" label>
                <el-input type="password" v-model="form.password" :placeholder="$t('message.enterpassword')"></el-input>
                <p class="size">{{$t('message.English')}}</p>
              </el-form-item>
              
              <el-button
                class="btn-block mt-60"
                type="success"
                @click="confirm()"
                size="large"
              >{{$t('message.submit')}}</el-button>
            </el-form>

        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {passwordCode,passwordAdd} from "../api/api";
import qs from "qs";
import { debug, debuglog } from "util";
export default {
  data() {
    return {
      show: true,
      count: "",
      timer: null,
      activeName: "first",
      input4: "",
      CountryList: [],
      CountryLists: [],
      type:0,
      form: {
        account: "",
        code: "",
        inviteCode: "",
        password: "",
        input3: "",
        Verification3: "",
        select: "",
        id: "",
        idcode:""
      },
      rules: {
        
   
        password: [
          {
            required: true,
            message: this.$t('message.letters'),
            trigger: "blur"
          },
          {
            validator: (rule, value, cb) => {
              cb();
            },
            trigger: "blur"
          }
        ],
       
      }
    };
  },
  computed: {
    year() {
      let date = new Date();
      let year = date.getFullYear();
      return year;
    },
    lang() {
      return window.localStorage.getItem("lang");
    }
  },
  mounted() {
    
  },
  methods: {
     MathRand() {
      var Num = "";
      for (var i = 0; i < 6; i++) {
        Num += Math.floor(Math.random() * 10);
      }
      this.idcode =  Num
    },
    getCode() {
        this.MathRand();
         var TIME_COUNT = 60;
              let data = {
                guid: this.$allId.guid,
                mobile: this.form.input3,
                code:this.idcode
      };
      passwordCode(data).then(res => {
       if(res.data.ResultCD=="I001"){
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;

            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          this.$message.error(res.data.ErrorMsg);
        }
      });
      
    },
    confirm() {
      this.$refs.form.validate(valid => {
        var _this = this
        if (valid) {
          console.log(_this.idcode*1 , _this.form.Verification3)
          if(_this.idcode != _this.form.Verification3){
                _this.$message.error("请输入正确验证码！321321");
                return false
          }
            if (!_this.form.input3) {
            _this.$message.error(_this.$t('message.oremail'));
            return false;
          }      
            if (!/^\d{11}$/.test(_this.form.input3)) {
              _this.$message.error(_this.$t('message.correctphone'));
              return false;
            }
          let data = {
            guid:_this.$allId.guid,
            loginId:_this.form.input3,
            hashedNewPassword:_this.$md5(_this.form.password),
            vcode:_this.form.Verification3,
          }

          console.log(data)
          passwordAdd(data).then(res => {
            console.log(res.data)
            if(res.data.ResultCD=="I001"){
               _this.$message({
                message: _this.$t('message.immediatelyZh'),
                type: "success"
              });
              _this.$router.push({path:'/login'})
            }else{
              _this.$message.error(res.data.ErrorMsg);
            }
          })
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  watch: {}
};
</script>

<style scoped>
@import "../assets/css/var.css";
.container {
  /* background-color: #fff; */
  margin: 20px auto 30px;
  margin-top: 150px;
}
.form-box1 {
  position: relative;
  border: 1px solid #ddd;
  background: #fff;
  padding: 30px;
  border-radius: 15px;
}
.size {
  font-size: 10px;
  color: #999;
  line-height: 28px;
  /* transform: scale(0.8); */
}
.lizi {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
   background: #1a273a;
  
}
.protocol-line {
  margin-top: 25px;
  padding-bottom: 115px;
  position: relative;
  border-top: 1px solid #ddd;
}

.copyright {
  text-align: center;
  padding-bottom: 30px;
}
</style>
